<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>学学app</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/home.css" />
    <link rel="stylesheet" type="text/css" href="./css/swiper.css" />

    <style type="text/css">
        #head_div {
            background-color: #fff;
        }

        .aui-bar-tab .aui-active {
            color: #ED6D38;
        }

        .footer {
            height: 50px;
            width: 100%;
            background-color: #fff;
            color: #4F4F4F;
            text-align: center;
            border-top: 1px solid #F5F5F5;
        }
        .slide-fade-enter-active {
          transition: all .2s ease;
        }
        .slide-fade-leave-active {
          transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
          transform: translateY(10px);
          opacity: 0;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <header id="head_div"> </header>
        <div v-if="!isnotconnectflag">
            <div class="top" id="header">
              <transition name="slide-fade" v-if="BannerList.length>0">
                <div class="swiper-container" v-show="!headerflag">
                    <!-- <img src="image/login/xuexue.png" alt="" class="logo"> -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  v-for="item,index in BannerList" :data-index="index"  >
                            <img v-bind:src="item.img" class="maskimg">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

                 </transition>
                 <div class="search"  v-show="!headerflag">
                     <input type="text" placeholder="输入搜索内容" class="input test"  @click.stop="OpenHotSearchWin()">
                     <img src="image/home/search.png" alt="">
                 </div>
                <div class="search2" @click.stop="OpenHotSearchWin()" id="searchtop" v-show="headerflag">
                    <input type="text" placeholder="输入搜索内容" class="search2input" disabled="disabled">
                    <img src="image/home/search.png" alt="">
                </div>
            </div>
            <div class="list" style="height:45px;" v-bind:class="{ fixed2: headerflag }">
                <div class="child test" v-bind:class="{ childact: item.flag }" @click=cavclick(item) v-for="item in cavlists" v-html="item.leader_name"></div>
                <div class="aui-clearfix"></div>
            </div>

        </div>


        <footer class="aui-bar aui-bar-tab footer" id="footer">
            <div class="aui-bar-tab-item aui-active" tapmode>
                <div class="tab-item1"><img src="image/homeicon.png" style="width:20px;height:18px;" alt=""></div>
                <div class="tab-item2"><img src="image/home_icon.png" style="width:20px;height:18px;" alt=""></div>
                <div class="aui-bar-tab-label" style="padding-top:4px;font-size: 10px;">首页</div>
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <div class="tab-item1"><img src="image/learnicon.png" style="width:25px;height:17px;" alt=""></div>
                <div class="tab-item2"><img src="image/plan_icon.png" style="width:25px;height:17px;" alt=""></div>
                <div class="aui-bar-tab-label" style="padding-top:4px;font-size: 10px;">学习计划</div>
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <div class="tab-item1"><img src="image/VIPiconfont.png" style="width:18px;height:16px;" alt=""></div>
                <div class="tab-item2"><img src="image/VIPiconf.png" style="width:18px;height:16px;" alt=""></div>
                <div class="aui-bar-tab-label" style="padding-top:4px; font-size: 10px;">大咖</div>
                <!-- <div class="aui-bar-tab-label" style="padding-top:4px; font-size: 10px;">大咖VIP</div> -->
            </div>
            <div class="aui-bar-tab-item" tapmode>
                <div class="tab-item1"><img src="image/myicon.png" style="width:14px;height:18px;" alt=""></div>
                <div class="tab-item2"><img src="image/mine_icon.png" style="width:14px;height:18px;" alt=""></div>
                <div class="aui-bar-tab-label" style="padding-top:4px;font-size: 10px;">我的</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/aui-tab.js"></script>
<script type="text/javascript" src="./script/jiguang.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript" src="./script/config.js"></script>
<script type="text/javascript" src="./script/rest.js"></script>
<script type="text/javascript" src="./script/swiper.min.js"></script>
<script type="text/javascript" src="./script/vue.2.5.js"></script>

<script type="text/javascript">
    var heighth;
    var uid;
    var header;
    var headerPos;
    var body_h;
    var footerH;
    var rect_h;
    var vm = new Vue({
        el: '#vm',
        data: {
            headerflag: false,
            BannerList: [],
            cavlists: [],
            leimuid: '',
            // 是否联网
            isnotconnectflag: true,
            numvalue: '0'
        },
        created: function() {
            var _this = this;
            apiready = function() {
                api.parseTapmode();
                $api.fixTabBar($api.byId('footer'))
                var isfirst = $api.getStorage('isfirst');
                //  $api.rmStorage('isfirst');
                if (!isfirst) {
                    api.openFrame({
                        name: 'welcome',
                        url: './html/welcome.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: 'auto',
                            h: 'auto'
                        }
                    });
                }else {
                  _this.init();
                  if (!_this.isnotconnectflag) {
                      _this.getlunbotu()
                  }
                }
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

                api.addEventListener({
                    name: 'isfirst'
                }, function(ret, err){
                  _this.init();
                  if (!_this.isnotconnectflag) {
                      _this.getlunbotu()
                  }
                });

                api.addEventListener({
                    name: 'shuaxin'
                }, function(ret, err) {
                    var connectionType = api.connectionType;
                    if (connectionType == 'none') {
                        _this.isnotconnectflag = true;
                    } else {
                        _this.isnotconnectflag = false;
                    }
                    _this.numvalue = ret.value.numvalue;
                    // alert(_this.numvalue)
                    // alert(JSON.stringify(ret))
                    _this.openframgroup(_this.numvalue)

                });

                api.addEventListener({
                    name: 'keyback'
                }, function(ret, err) {
                    api.confirm({
                        title: '是否退出应用？',
                        buttons: ['确定', '取消']
                    }, function(ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 1) {
                            api.closeWidget({
                                silent: true
                            });
                        }
                    });
                });

                api.setStatusBarStyle({
                    style: 'dark',
                    color: 'transparent'
                });
                // 推送
                jiguang.Listener(function(ret, articleid) {
                    console.log(JSON.stringify(ret) + '*******************************');
                    apicmmon.openwin('verifyinformation', './html/login/verify-information_win.html')
                })
            }
        },
        methods: {
            init: function() {
                var _this = this;
                // 判断是否联网
                _this.shuaxin();

                api.closeFrame({
                    name: 'my'
                });
                api.addEventListener({
                    name: 'gundong'
                }, function(ret, err) {
                    _this.headerflag = true;
                    setTimeout(function() {
                    api.setFrameAttr({
                        name: 'home',
                        rect: {
                            x: 0,
                            y: headerPos.h + 110,
                            w: 'auto',
                            h: rect_h - 110
                        },
                    });
                  },200)

                });
                api.addEventListener({
                    name: 'xiala'
                }, function(ret, err) {
                    _this.headerflag = false
                    setTimeout(function() {
                    api.setFrameAttr({
                        name: 'home',
                        rect: {
                            x: 0,
                            y: headerPos.h + heighth + 45,
                            w: 'auto',
                            h: rect_h - heighth - 45
                        },
                    });
                  },200)
                });




            },
            shuaxin: function() {
                var _this = this;
                var connectionType = api.connectionType;
                if (connectionType == 'none') {
                    _this.isnotconnectflag = true;
                } else {
                    _this.isnotconnectflag = false;
                }
                _this.opengroup()

            },
            opengroup(heighth) {
                var _this = this;
                header = $api.byId('head_div');
                headerPos = $api.offset(header);
                body_h = $api.offset($api.dom('body')).h;
                footerH = $api.offset($api.byId('footer')).h;
                rect_h = api.winHeight - footerH - headerPos.h;

                if (_this.isnotconnectflag) {
                    _this.opennothing('0');
                    api.bringFrameToFront({
                        from: 'nothing'
                    });
                } else {
                    //获取类目
                    new rest().get('Leaderlist').datae({
                        module: 1
                    }).success(function(res) {
                        if (res.flag == 1) {
                            res.msg.map(function(ret, index) {
                                ret['flag'] = false;
                                if (index == 0) {
                                    _this.leimuid = ret.id;
                                    ret['flag'] = true
                                }
                            })
                            _this.cavlists = res.msg;
                            api.bringFrameToFront({
                                from: 'home'
                            });
                            api.openFrame({
                                name: 'home',
                                rect: {
                                    x: 0,
                                    y: headerPos.h + heighth + 45,
                                    w: 'auto',
                                    h: rect_h - heighth - 45
                                },
                                reload:true,
                                url: 'html/home/home.html',
                                vScrollBarEnabled: false,
                                hScrollBarEnabled: false,
                                pageParam: {
                                    leimuid: _this.leimuid
                                }
                            });
                        }
                        console.log(JSON.stringify(res))
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()

                }

                var tab = new auiTab({
                    element: document.getElementById("footer")
                }, function(ret) {
                    var id = ret.index - 1;
                    var connectionType = api.connectionType;
                    if (connectionType == 'none') {
                        _this.isnotconnectflag = true;
                    } else {
                        _this.isnotconnectflag = false;
                    }

                    if (_this.isnotconnectflag) {
                        api.bringFrameToFront({
                            from: 'nothing'
                        });
                    }
                    _this.openframgroup(id)


                });
            },
            openframgroup(id) {
                var header = $api.byId('head_div');
                var headerPos = $api.offset(header);
                var body_h = $api.offset($api.dom('body')).h;
                var footerH = $api.offset($api.byId('footer')).h;
                var rect_h = api.winHeight - footerH - headerPos.h;
                var _this = this;
                if (id == 1) {
                    api.setFrameAttr({
                        name: 'plan_frm',
                        hidden: false
                    });

                } else {
                    api.setFrameAttr({
                        name: 'plan_frm',
                        hidden: true
                    });
                }
                if (id == 2) {
                  // api.sendFrameToBack({
                  //     from: 'plan_frm',
                  // });
                    api.setFrameAttr({
                        name: 'vip_frame',
                        hidden: false
                    });
                } else {
                    api.setFrameAttr({
                        name: 'vip_frame',
                        hidden: true
                    });
                }
                // 后台对用户的身份进行切换后，APP端每次进“我的”模块刷新
                if (id == 3 || id == 2) {
                    api.sendEvent({
                        name: 'refreshmine',
                    });
                }
                if (id == 0) {
                    if (_this.isnotconnectflag) {
                        _this.opennothing('0');
                        api.setFrameAttr({
                            name: 'home',
                            hidden: true,
                        });
                    } else {
                        _this.headerflag = false;
                        api.sendEvent({
                            name: 'switchzero',
                        });

                        api.setFrameAttr({
                            name: 'nothing',
                            hidden: true,
                        });
                        api.bringFrameToFront({
                            from: 'index'
                        });
                        api.bringFrameToFront({
                            from: 'home'
                        });
                        api.openFrame({
                            name: 'home',
                            rect: {
                                x: 0,
                                y: headerPos.h + heighth + 45,
                                w: 'auto',
                                h: rect_h - heighth - 45
                            },
                            url: 'html/home/home.html',
                            vScrollBarEnabled: false,
                            hScrollBarEnabled: false,
                            pageParam: {
                                leimuid: _this.leimuid
                            }
                        });
                    }

                    api.setFrameAttr({
                        name: 'plan',
                        hidden: true,
                    });
                    api.setFrameAttr({
                        name: 'vip',
                        hidden: true,
                    });
                    api.setFrameAttr({
                        name: 'my',
                        hidden: true,
                    });

                } else if (id == 1) {
                    if (_this.isnotconnectflag) {
                        _this.opennothing('1');
                    } else {
                        api.openFrame({
                            name: 'plan',
                            rect: {
                                x: 0,
                                y: headerPos.h,
                                w: 'auto',
                                h: rect_h
                            },
                            url: 'html/studyplan/plan_win.html',
                            vScrollBarEnabled: false,
                            hScrollBarEnabled: false,
                        });

                        api.setFrameAttr({
                            name: 'plan_frm',
                            hidden: false
                        });
                        api.bringFrameToFront({
                            from: 'plan'
                        });
                        api.bringFrameToFront({
                            from: 'plan_frm'
                        });

                    }

                } else if (id == 2) {
                    if (_this.isnotconnectflag) {
                        _this.opennothing('2');
                    } else {
                      api.setFrameAttr({
                          name: 'home',
                          hidden: true,
                      });
                      api.setFrameAttr({
                          name: 'my',
                          hidden: true
                      });

                        api.openFrame({
                            name: 'vip',
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h:api.winHeight - footerH
                            },
                            bounces:false,
                            url: 'html/VIP/vip_unlogin_win.html',
                            vScrollBarEnabled: false,
                            hScrollBarEnabled: false
                        });
                        api.setFrameAttr({
                            name: 'vip_frame',
                            hidden: false
                        });
                        api.bringFrameToFront({
                            from: 'vip'
                        });
                        api.bringFrameToFront({
                            from: 'vip_frame'
                        });
                    }

                } else {
                    if (_this.isnotconnectflag) {
                        _this.opennothing('3');
                    } else {
                        api.bringFrameToFront({
                            from: 'my'
                        });
                        api.openFrame({
                            name: 'my',
                            rect: {
                                x: 0,
                                y: headerPos.h,
                                w: 'auto',
                                h: rect_h
                            },
                            url: 'html/myself/my_unlogin.html',
                            vScrollBarEnabled: false,
                            hScrollBarEnabled: false
                        });
                    }

                }
            },
            opennothing: function(num) {
                var footerH = $api.offset($api.byId('footer')).h;
                api.openFrame({
                    name: 'nothing',
                    url: './html/few/nothing.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: api.winHeight - footerH
                    },
                    pageParam: {
                        num: num
                    },
                    reload: true,
                    preload: 0,
                    scrollEnabled: false,
                });
            },
            getlunbotu() {
                var _this = this;
                //获取轮播图
                new rest().get('BannerList').success(function(res) {
                    // console.log(JSON.stringify(res.msg))
                    if (res.flag == 1) {
                        _this.BannerList = res.msg;
                        setTimeout(function() {
                          var swiper = new Swiper('.swiper-container', {
                                  pagination: '.swiper-pagination',
                                  paginationClickable: true,
                                  spaceBetween: 30,
                                  centeredSlides: true,
                                  autoplay: 2500,
                                  autoplayDisableOnInteraction: false,
                                  loop: true,
                                  observeParents:true,
                                   observer:true,
                                   onClick(swiper,even){
                                     var item;
                                     for (var i = 0; i < _this.BannerList.length; i++) {
                                         if (i==swiper.realIndex) {
                                            item = _this.BannerList[i]
                                         }
                                     }
                                     _this.openBanner(item.type,item.href,item)
                                   }
                              });

                            var header = $api.byId('header');
                            heighth = $api.offset(header).h;

                            _this.opengroup(heighth);

                        }, 100)
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },

            cavclick: function(ret) {
                var _this = this;
                if (ret.flag == false) {
                    this.cavlists.map(function(ret, index) {
                        ret.flag = false;
                    })
                    ret.flag = true;
                    _this.leimuid = ret.id;
                    api.sendEvent({
                        name: 'changetab',
                        extra: {
                            leimuid: _this.leimuid
                        }
                    });

                }
            },
            openBanner: function(res, href, content) {
                console.log(JSON.stringify(content))
                console.log(res + '****轮播图详情')
                if (res == 1) {
                    var _this = this;
                    if (uid) {
                        var data1 = {
                            video_id: href,
                            uid: uid
                        }
                    } else {
                        var data1 = {
                            video_id: href,
                            uid: ''
                        }
                    }
                    new rest().get('getDetail').datae(data1).success(function(res) {
                        console.log(JSON.stringify(res))
                        if (res.flag == 1) {
                            _this.videodetial = res.msg;
                            apicmmon.openwin('videodetail_win', 'html/VIP/videodeail.html', {
                                videoid: href
                            })
                        } else {
                            api.toast({
                                msg: '视频不存在',
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()

                } else if (res == 2) {
                    api.openWin({
                        name: 'banner_wai',
                        url: './html/home/banner_wai.html',
                        pageParam: {
                            url: href
                        }
                    });
                } else {
                    api.openWin({
                        name: 'banner_detial',
                        url: './html/home/banner_detial_win.html',
                        pageParam: {
                            content: content
                        }
                    });
                }
            },
            OpenHotSearchWin:function() {
              apicmmon.openwin('hot_win', 'html/few/hot_win.html')
            }
        }
    })
</script>

</html>
